<template>
  <div class="ddgl_box">
    <header-comm></header-comm>
    <div class="header_sele" >
      <!-- <div> -->
      <span class="check">
        <a-button type="primary" @click="exportexl">导出excel</a-button>
      </span>
      <div class="date_box">
        <!-- <span>时间查询：</span> -->
        <!-- <a-range-picker style="width:260px;" @change="dateChange" /> -->
        <a-range-picker
          @change="dateChange"
          :show-time="{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <div class="date_box">
        <!-- <span>订货人：</span> -->
        <div class="sele">
          <a-input placeholder="请输入订货人" v-model="dhr" style="width: 150px" @change="onSearch" />
          <a-icon type="search" class="search" />
        </div>
      </div>
      <div class="date_box">
        <!-- <span>订货公司：</span> -->
        <div class="sele">
          <a-input placeholder="请输入订货公司" v-model="dhdwmc" style="width: 200px" @change="onSearch" />
          <a-icon type="search" class="search" />
        </div>
      </div>
      <!-- <span>查询销售单：</span> -->
      <div class="sele">
        <a-input
          v-model="serchvalue"
          placeholder="手机号/销售单编号 "
          style="width: 200px"
          @change="onSearch"
        />
        <a-icon type="search" class="search" />
      </div>
      <!-- </div> -->
    </div>
    <!-- 表格-================= -->
    <div class="bcg">
      <div class="tabs">
        <div class="countnumber" v-if="countnumber!=''">
          <span>总数量：<span class="red" >{{countnumber[0].djsl}}</span></span>
          <span>总金额：<span class="red">￥{{countnumber[0].hsze}}</span></span>
        </div>
        <a-tabs :defaultActiveKey="1" @change="callback">
          <a-tab-pane :key="1" forceRender >
            <span slot="tab">
              全部订单
              <a-badge :count="allcount" :number-style="{ backgroundColor: 'pink' }" />
            </span>
          </a-tab-pane>
          <!-- <a-tab-pane v-for="(item, i) in tjnum" :key="i+1">
            <span slot="tab">
              {{item.SHBJB}}
              <a-badge :count="item.num" />
            </span>
          </a-tab-pane>-->

          <a-tab-pane key="2" forceRender>
            <span slot="tab">
              待支付
              <a-badge :count="dzfcount" :number-style="{ backgroundColor: 'red' }"  />
            </span>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab">
              待发货
              <a-badge :count="dfhcount" :number-style="{ backgroundColor: 'orange' }" />
            </span>
          </a-tab-pane>
          <a-tab-pane key="5">
            <span slot="tab">
              已发货
              <a-badge :count="yfhcount" :number-style="{ backgroundColor: 'cyan' }" />
            </span>
          </a-tab-pane>
          <a-tab-pane key="4">
            <span slot="tab">
              已完成
              <a-badge :count="ywccount" :number-style="{ backgroundColor: 'lime' }" />
            </span>
          </a-tab-pane>
        </a-tabs>
        
        <ddglym></ddglym>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
import moment from "moment";
import ddglym from "./ddglym.vue";
// import { setTimeout } from 'timers';
// const plainOptions = ["待处理", "已处理"];
// const defaultCheckedList = ["待处理", "已处理"];
export default {
  data() {
    return {
      tabskey: 1,
      tabslist: [],
      tabschil: [],
      nulldata: "",
      page: 0,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      serchvalue: "",
      dhr: "",
      dhdwmc: "",
      startTime: "",
      endTime: "",
      counttab: 1,
      allcount: 0,
      dzfcount: 0,
      dfhcount: 0,
      yfhcount: 0,
      ywccount: 0,
      ygbcount: 0,
      tjnum: "",
      countnumber:''
      // checkedList: defaultCheckedList,
      // plainOptions
    };
  },
  components: {
    headerComm,
    ddglym
  },
  methods: {
    moment,
    //搜索框
    onSearch(e) {
      // this.serchvalue = e.target.value;
      this.page = 1;
      this.getddgl(
        this.pagination,
        this.serchvalue,
        this.tabskey,
        this.dhr,
        this.dhdwmc,
        this.startTime,
        this.endTime
      );
    },
    callback(key) {
      this.tabskey = key;
      console.log(key);
      // this.page=1
      this.getddgl(this.pagination, this.serchvalue, this.tabskey);
      // this.getddgl(this.pagination, this.serchvalue, this.tabskey,this.dhr,this.dhdwmc,this.startTime,this.endTime);
    },
    //获取列表
    getddgl(pagination, value, key, dhr, dhdwmc, startTime, endTime) {
      this.page = pagination.current ? pagination.current : this.page;
      this.axios
        .post(
          "order/orderList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            shbjb: this.tabskey,
            filed: this.serchvalue,
            page: this.page,
            pageSize: pagination.defaultPageSize,

            startTime: this.startTime,
            endTime: this.endTime,
            dhr: this.dhr,
            dhdwmc: this.dhdwmc
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.tabslist = res.data.result;
            this.countnumber=res.data.count
            this.pagination.total = Number(res.data.totalNum);
            for (var i = 0; i < res.data.tjnum.length; i++) {
              if (res.data.tjnum[i].SHBJB == "待发货") {
                this.dfhcount = res.data.tjnum[i].num;
              }
              if (res.data.tjnum[i].SHBJB == "已发货") {
                this.yfhcount = res.data.tjnum[i].num;
              }
              if (res.data.tjnum[i].SHBJB == "待支付") {
                this.dzfcount = res.data.tjnum[i].num;
              }
              if (res.data.tjnum[i].SHBJB == "交易完成") {
                this.ywccount = res.data.tjnum[i].num;
              }
              if (res.data.tjnum[i].SHBJB == "交易关闭") {
                this.ygbcount = res.data.tjnum[i].num;
              }
              
            }
            this.ywccount = Number(this.ywccount) + Number(this.ygbcount);
              // this.allcount = res.data.tjnum[i].num;
              this.allcount =
                Number(this.dfhcount) +
                Number(this.dzfcount) +
                Number(this.yfhcount) +
                this.ywccount;
            // ygbcount
            // allcount:0,
            // dzfcount:0,
            // dfhcount:0,
            // yfhcount:0,
            // ywccount:0,
            // res.data.tjnum.push({

            // })
            this.tjnum = res.data.tjnum;
            console.log(this.tjnum);
            for (var i = 0; i < res.data.result.length; i++) {
              this.tabslist[i].key = i;
              this.tabschil = this.tabslist[i].child;

              for (var j = 0; j < this.tabslist[i].child.length; j++) {
                this.tabslist[i].child[j].key = i + "_" + j;
                this.tabslist[i].zje = Number(this.tabslist[i].zje);
                this.tabslist[i].child[j].DHSL = Number(
                  this.tabslist[i].child[j].DHSL
                );
                this.tabslist[i].child[j].HSJ = Number(
                  this.tabslist[i].child[j].HSJ
                );
                this.tabslist[i].child[j].keys = i;
              }
            }
            // this.nulldata = "";
          } else {
            this.tabslist = [];
            this.ygbcount=0
            this.allcount=0
            this.dzfcount=0
            this.dfhcount=0
            this.yfhcount=0
            this.ywccount=0
            // this.nulldata = "无数据...";
          }
        });
    },
    //导出excel
    exportexl() {
      this.axios
        .post(
          "order/pushOrderList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            sqdhdh: this.serchvalue,
            startTime: this.startTime,
            endTime: this.endTime,
            dhr: this.dhr,
            dhdwmc: this.dhdwmc,
            shbjb: this.tabskey
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            location.href = res.data.result;

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    dateChange(date, dateString) {
      console.log(date, dateString);
      this.startTime = dateString[0];
      this.endTime = dateString[1];
      this.getddgl(
        this.pagination,
        this.serchvalue,
        this.tabskey,
        this.dhr,
        this.dhdwmc,
        this.startTime,
        this.endTime
      );

      // this.getddgl(this.pagination,this.serchvalue, this.tabskey);
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56]
      };
    }
  },

  created() {
    this.getddgl(this.pagination, this.serchvalue, this.tabskey);
  }
};
</script>

<style lang='less' >
.ddgl_box {
  .header_sele {
    position: absolute;
    top: 55px;
    // left: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    text-align: right;
    width: 90%;
    background-color: #fff;
    box-shadow: 5px 5px 5px #ccc;
    // height: 50px;
    padding: 20px;
    .check {
      margin-right: 20px;
    }
    .sele {
      position: relative;
      display: inline-block;
      i {
        position: absolute;
        top: 10px;
        right: 8px;
      }
    }
    // .add_qy {
    //   width: auto;
    //   text-align: right;
    //   padding: 10px 0;
    //   display: inline-block;
    //   height: 100%;
    //   button {
    //     margin: 0 10px;
    //   }
    // }
    .date_box {
      display: inline-block;
      margin: 0 10px;
    }
  }
  .tabs {
    position: relative;
    // top: 118px;
    top: 140px;
    background-color: #fff;
    width: 98%;
    left: 1%;
    .ant-tabs-bar {
      margin: 0 !important;

      .ant-tabs-nav-wrap {
        text-align: left;
        padding: 15px 40px 0;
      }
    }
    .countnumber{
      position: absolute;
      right: 100px;
      top: 20px;
      span{
        margin-right: 20px;
        .red{
          color: red;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
